<template>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="返回主页" name="five"></el-tab-pane>
            <el-tab-pane label="个人资料" name="first">
                <div style="width: 400px;">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
                        size="medium ">
                        <el-form-item label="姓名" prop="patientName">
                            <el-input v-model="ruleForm.patientName"></el-input>
                        </el-form-item>
                        <el-form-item label="账号" prop="username">
                            <el-input v-model="ruleForm.username" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="身份证号" prop="patientCard">
                            <el-input v-model="ruleForm.patientCard"></el-input>
                        </el-form-item>
                        <el-form-item label="电话号" prop="patientPhone">
                            <el-input v-model="ruleForm.patientPhone"></el-input>
                        </el-form-item>
                        <el-form-item label="余额" prop="patientSalary">
                            <el-input v-model="ruleForm.patientSalary" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm()">更改信息</el-button>
                            <el-button @click="goRecharge()">前往充值</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="second">修改密码</el-tab-pane>
            <el-tab-pane label="充值余额" name="third">充值余额</el-tab-pane>
            <el-tab-pane label="我的订单" name="fourth">我的订单</el-tab-pane>
            
        </el-tabs>
    </div>
</template>
<script>
export default {
    data() {
        return {
            activeName: 'first',
            ruleForm: {},
            rules: {
                patientName: [
                    { required: true, message: '请输入您的姓名', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                region: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                ],
                date1: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
                date2: [
                    { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                ],
                type: [
                    { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                ],
                resource: [
                    { required: true, message: '请选择活动资源', trigger: 'change' }
                ],
                desc: [
                    { required: true, message: '请填写活动形式', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        handleClick(tab, event) {
            this.activeName == 'five' ? this.$router.push(`/FrontPatient`) : ""
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        goRecharge() {
            this.activeName="third"
        },
        getPerson(){

        }

    },
    mounted() {
       let patient =  sessionStorage.getItem("loginPatient");
        patient = JSON.parse(patient);
        if (!patient.patientSalar) {
            this.$confirm('您的余额为0,三天后不充值将会冻结您的账号,是否前去充值?', '提示', {
                confirmButtonText: '前去充值',
                cancelButtonText: '暂时不用',
                type: 'error'
            }).then(() => {
                this.activeName="third"
            }).catch(() => {

            });
        }
        if(patient.patientSalary>0 && patient.patientSalary<10){
            this.$confirm('您的余额低于10元, 是否前去充值?', '提示', {
                confirmButtonText: '前去充值',
                cancelButtonText: '暂时不用',
                type: 'warning'
            }).then(() => {
                this.activeName="third"
            }).catch(() => {
            });
        }
        this.ruleForm = patient;
    },

};
</script>
<style  scoped></style>